<template>
  <div>
    <div style="display: flex;justify-self: space-between;margin: 20px;" v-if="!loading">
      <div style="flex:0 1 20%;">
        <dv-border-box-13 style="width: 100%;height:800px;padding: 20px;">
          <div class="list-container">
            <data-list-tmp></data-list-tmp>
          </div>
        </dv-border-box-13>
      </div>

      <div style="flex:0 1 60%">
        <data-center></data-center>
      </div>

      <div style="flex:0 1 20%">
        <dv-border-box-13 style="width: 100%;padding: 20px;">
          <RegionBottomCenterLeft></RegionBottomCenterLeft>
        </dv-border-box-13>
      </div>
    </div>
  </div>

</template>

<script>
import dvInput from '@/components/dv-input'
import dvList from '@/components/dv-list'
import dvRadioGroup from '@/components/dv-radio-group'
import dvMenu from '@/components/dv-menu'
import RegionBottomCenterLeft from "@/views/dataView/region-bottom-center-left.vue";
import dataCenter from "@/views/dataView/components/data-center";
import DataListTmp from "@/views/dataView/components/data-list-tmp";

export default {
  components: {DataListTmp, dvInput, dvList, dvMenu, dvRadioGroup, RegionBottomCenterLeft, dataCenter},
  data() {
    return {
      loading: false,
      inputvalue: ["1", "2", "3"],
      model: {
        name: "",
        model: "",
        package: "",
      },
      models: [
        {label: 'model01', value: 'model01'},
        {label: 'model02', value: 'model02'},
        {label: 'model03', value: 'model03'}
      ],
    }
  },
  methods: {

  },
  mounted() {
    let li = document.querySelectorAll('.model-select');
    let self = this;
    for (let i = 0; i < li.length; i++) {
      li[i].onclick = function () {
        this.className = 'model-select select';
        setTimeout(() => {
          this.className = 'model-select model-complete';
          // this.style.pointerEvents='none';
          this.onclick = null;
          this.style.cursor = 'not-allowed';
          self.$message({
            message: '数据处理成功',
            type: 'success'
          });
        }, 2000)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 100%;
  padding: 16px 16px 0 16px;
  background-image: url("../../assets/pageBg.png");
  background-size: cover;
  background-position: center center;
  color: aliceblue;
}

.list-container {
  background-color: #0a1c3b;
  border-radius: 5px;
  border: 2px solid #00b3ff;
  padding: 10px;
}

.model-select {
  float: left;
  width: 140px;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  background-color: #4d5b84;
  padding: 20px 0;
  //margin-bottom: 5px;
  margin: 5px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.model-select:hover {
  background-color: #1a5cd7;
  transform: scale(1.01);
}

.model-select:active {
  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);
  transform: scale(0.99);
}

.select {
  background-color: #1a5cd7;
  transform: scale(1.01);
}

.model-complete {
  background-color: #8cdc68;
}

.model-complete:hover {
  background-color: #8cdc68;
  cursor: not-allowed;
  transform: none;
}
</style>
